<template>
    <div class="container">
        <!-- 头部 -->
        <div class="header">
            <div class="left">
                <span style="margin-right: 12px;">订单状态</span>
                <el-select clearable @change="changeSelect" v-model="selectValue" placeholder="订单状态">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="right">
                <el-button>搜索</el-button>
                <el-button>重置</el-button>
            </div>
        </div>
        <!-- 表格 -->
        <div class="table">
            <el-table max-height="500" :data="list" border style="width: 100%">
                <el-table-column fixed type="index" label="#" width="70" align="center" />
                <el-table-column prop="number" label="订单编号" width="340" align="center" />
                <el-table-column label="订单状态" width="240" align="center">
                    <template slot-scope="scope">
                        <el-button :type="getType(scope.row.status)">{{ getStatus(scope.row.status) }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" label="添加时间" width="240" align="center" />
                <el-table-column prop="consignee_name" label="用户账号" width="240" align="center" />
                <el-table-column prop="pay_type" label="订单类型" width="240" align="center">
                    <el-tag type="success">正常订单</el-tag>
                </el-table-column>
                <el-table-column prop="remark" label="备注" width="120" align="center" />
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="foot">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="orderData.page" :page-sizes="[5, 10, 15, 20]" :page-size="orderData.limit"
                layout="total, sizes, prev, pager, next, jumper" :total="count">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { orderList } from "@/api/order";
export default {
    name: "OrderList",
    data() {
        return {
            options: [
                {
                    value: "1",
                    label: "待支付",
                },
                {
                    value: "2",
                    label: "已支付待发货",
                },
                {
                    value: "3",
                    label: "已发货",
                },
                {
                    value: "4",
                    label: "已收获评价",
                },
                {
                    value: "0",
                    label: "全部",
                },
            ],
            selectValue: "",//选择器绑定的数据
            list: [], //表格数据
            orderData: {
                limit: 10,
                page: 1,
                status: "0",
            },
            count: 0, //总条数
        };
    },
    methods: {
        //获取列表数据
        async getList() {
            let { data } = await orderList(this.orderData);
            this.count = data.count;
            this.list = data.list;
        },
        handleSizeChange(size) {
            this.orderData.limit = size;
            this.getList();
        },
        handleCurrentChange(page) {
            this.orderData.page = page;
            this.getList();
        },
        //选择器发生变化
        changeSelect() {
            this.orderData.status = this.selectValue || '0';
            this.getList()
        },
        getStatus(status){
            switch (status) {
                case 1:
                    return '待支付';
                case 2:
                    return '已支付待发货';
                case 3:
                    return '已发货';
                case 4:
                    return '已收获待评价';
            }
        },
        getType(status){
            switch (status) {
                case 1:
                    return 'danger';
                case 2:
                    return 'info';
                case 3:
                    return 'primary';
                case 4:
                    return 'success';
            }
        }
    },
    async created() {
        this.getList();
    },
};
</script>

<style scoped lang="scss">
.container {
    padding: 20px;

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }

    .table {
        margin-bottom: 12px;
    }

    .foot {
        float: right;
    }
}
</style>